<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
    <style>
        /*后代选择器：可以选择子孙后代*/
        .children li {
            color: purple;
        }
        /*子元素选择器：只能选择儿子*/
        .link>a {
            background-color: pink;
        }
        /*交集选择器：对同一个标签的选择标签加类啊这样的*/
        div.lore {
            background-color: #E06666;
        }
        /*并集选择器*/
        .box,
        p {
            background-color: green;
        }
        /*链接伪类选择器*/
        div.sense a:hover {
            background-color: royalblue;
        }
    </style>
</head>
<body>
<div class="children">
    <h3>后代选择器</h3>
    <ul>
        <li>lore</li>
        <li>folklore</li>
        <li>galore</li>
    </ul>
</div>
<div class="link">
    <h3>子元素选择器</h3>
    <a href="#">中国功夫</a>
</div>
<div class="intersection">
    <h3>交集选择器</h3>
    <div class="lore">
        folklore
    </div>
</div>
<div class="union">
    <div class="box">你好背景天安门</div>
    <p>我用无悔你发如雪</p>
</div>
<div>
    <div class="sense">
        <a href="#">爱我别走</a>
    </div>
</div>
</body>
</html>